<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='https://cdn.staticfile.org/react/16.4.0/umd/react.development.js'></script>
    <script src='https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js'></script>
    <!-- 生产环境中不建议使用 -->
    <script src='https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js'></script>
</head>

<body>
    <div id='app'>
    </div>
    <script type='text/babel'>
        // 经过上一节课的学习，你一定掌握了基本的props的使用。不就是像html一样给标签加属性么，可是接下来问题来了，我们真实的开发中一个人的信息显然不只有姓名年龄性别这么简单，如果有好多好多属性，你都这样一个一个打上去吗？而且很多时候这种信息都是后端返回给我们的，我们要做的只是把数据显示到页面上。这样一个一个打上去不仅效率低，而且极其容易打错字导致出现莫名其妙的问题。那么有没有什么办法能够批量的把已经拿到的数据放到组件的props中的方法呢？当然是有的，我们往下看。
        class Person extends React.Component{
            render(){
                const {name,age,sex,love} = this.props
                return (
                    <ul>
                        <li>姓名: {name}</li>
                        <li>性别: {sex}</li>
                        <li>年龄: {age}</li>
                        <li>{love}</li>
                    </ul>
                )
            }
        }

        // 我们现在假设p1就是后端返回给我们的，我们要做的就是把他放到组件的props里
        const p1 = {name:'刘康',sex:'女',age:23}

        // 是不是觉着这种写法很好用，不过也别高兴的太早，别忘了原生的js不允许直接对一个对象进行扩展运算符的。js中只允许像 let obj2 = {...obj1}这样的写法，但是jsx帮助我们做了修改，允许直接...obj了，但也只限对于组件进行批量传递的时候才允许这样写，也就是说只有像下面这种场景才允许这样写，其他时候还是不能直接...obj
        // 还有一个小知识点要强调下，下面的这个{...p}不是上面提到的let obj2 = {...obj1}，下面的这个大括号表示的是你要在里面写js表达式了。你能这样写只是因为jsx的功劳
        let app = document.getElementById('app')
        ReactDOM.render(<Person {...p1}/>,app)
        /*
            这样写的好处还有一个，那就是假如后端今天传给你的姓名属性是name，明天他们改成了nm，没告诉你，你也不用慌，因为你是解构赋值的，所以只需要修改一下组件类里的render方法里的name就好了。
        */
    </script>
</body>

</html>